<template>
  <div>
    <h1>app.vue</h1>

    <my-son>
      <!-- 插值语法写到哪个组件，就只能用哪个组件内的数据 -->
      <!-- <h3>传过去h3 -- {{ title }} -- {{ price }} </h3> -->
      <!-- 可是最终这个h3会放到my-son里去显示，这就意味着我可能 -->
      <!-- 就需要访问my-son里的数据做渲染 -->
      <!-- 所以这个时候要用 作用域插槽 -->
      <!-- 也就是说作用域插槽的作用其实就是把组件内部的数据暴露出来用 -->
      <template v-slot="obj">
        <h3>传过去h3 --- {{ obj.title }} --- {{ obj.price }}</h3>
      </template>

      <template #s1="obj">
        <h3>我在下面的h3 -- {{ obj.title }} -- {{ obj.price }}</h3>
      </template>
    </my-son>
  </div>
</template>

<script>
import MySon from './components/MySon.vue'
export default {
  components: {
    MySon
  }
}
</script>

<style>

</style>